import React from 'react'
import {
  View,
  Dimensions,
  Image,
  TouchableWithoutFeedback
} from 'react-native'

import PropTypes from 'prop-types'
import StyleSheet from '../../utils/rzStyleSheet'

import BaseComponent from '../../components/common/baseComponent'
import ViewPager from 'react-native-viewpager'
import {
  WINDOW_WIDTH
} from '../../constants/varibles'

const styles = StyleSheet.create({
  container: {
    height: 200,
    width: WINDOW_WIDTH
  },
  page: {
    width: Dimensions.get('window').width
  }
})

class TopViewPage extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'TopViewPage'

    this.state = {
      dataSource: (new ViewPager.DataSource({
        pageHasChanged: (p1, p2) => p1 !== p2
      }))
    }

    this.renderPage = this.renderPage.bind(this)
    this.onPressPage = this.onPressPage.bind(this)
  }

  onPressPage (index) {
    if (this.props.onPressPage) {
      this.props.onPressPage(index)
    }
  }

  renderPage (object, index) {
    return (
      <TouchableWithoutFeedback onPress={() => this.onPressPage(index)}>
        <Image
          source={{ uri: object }}
          style={styles.page}
        />
      </TouchableWithoutFeedback>
    )
  }

  render () {
    return (
      <View style={[styles.container, this.props.style]}>
        <ViewPager
          style={this.props.viewStyle}
          dataSource={this.state.dataSource.cloneWithPages(this.props.pageArray.toArray())}
          renderPage={this.renderPage}
          isLoop
          autoPlay
        />
      </View>
    )
  }
}

TopViewPage.propTypes = {
  pageArray: PropTypes.object.isRequired,
  onPressPage: PropTypes.func
}

export default TopViewPage
